﻿@using ViewRes
@{
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
}

@section Pagename{
    @LoginStrings.Register
}

@section Script{

    <script type="text/javascript">
        $(function () {
            $("#success").hide();
            $("#error").hide();

            $('.ui.form').form({
                Name: {
                    identifier: 'Name',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WritePleaseName'
                      }
                    ]
                },
                Email: {
                    identifier: 'Email',
                    rules: [
                      {
                          type: 'email',
                          prompt: '@LoginStrings.WritePleaseEmail'
                      }
                    ]
                },
                Username: {
                    identifier: 'Username',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WriteUsername'
                      }
                    ]
                },
                Password: {
                    identifier: 'Password',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WritePassword'
                      }
                    ]
                }
            }, {
                inline: true,
                on: 'blur',
                onSuccess: function () {

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/Login/RegisterPost",
                        data: $("#form :input").serialize(),
                        beforeSend: function () {
                            $("#error").hide();
                            $("#success").hide();
                            $(".ui.form").addClass("loading");
                        },
                        success: function updateFields(data) {
                            if (!data.Success) {
                                $("#error").html(data.Message).show();
                            } else {
                                $("#success").html(data.Message).show();
                            }
                        },
                        complete: function () {
                            $(".ui.form").removeClass("loading");
                        }
                    });
                }
            });

            $("#back").click(function () {
                window.location.href = '@Url.Action("Login")';
            });
        });
    </script>
}

<div class="ui one column grid">
    <div class="column">
        <div id="form" class="ui form segment">
            <h1>@LoginStrings.Register</h1>
            <div class="two fields">
                <div class="field">
                    <label>@LoginStrings.Name</label>
                    <input placeholder="" name="Name" type="text">
                </div>
                <div class="field">
                    <label>@LoginStrings.Email</label>
                    <input placeholder="" name="Email" type="text">
                </div>
            </div>
            <div class="field">
                <label>@LoginStrings.Username</label>
                <input placeholder="" name="Username" type="text">
            </div>
            <div class="field">
                <label>@LoginStrings.Password</label>
                <input type="password" name="Password">
            </div>
            <div class="ui blue submit button">@LoginStrings.Register</div>
            <div id="back" class="ui red button">@LoginStrings.Back</div>
            <div id="success" class="ui success message"></div>
            <div id="error" class="ui red message"></div>
        </div>
    </div>
</div>
